<template>
  <el-dialog
    v-el-drag-dialog
    width="800px"
    :title="formName"
    :visible="show"
    @update:visible="updateShow"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="130px"
    >
      <el-form-item label="方案名称：" prop="Sname">
        <el-input v-model="form.Sname" style="width: 500px" />
      </el-form-item>

      <el-form-item label="备注：" prop="Remark">
        <el-input
          style="width: 500px"
          class="flex-1"
          type="textarea"
          placeholder="请输入内容"
          v-model="form.Remark"
          maxlength="30"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="m-t-1 m-b-1 float_none">
      <el-button class="float_right" @click="addladderArray"
        >新增阶段</el-button
      >
    </div>
    <div class="auto-scroll">
      <div class="flex m-t-1 align-center space-between ladder_item">
        <div class="flex-1">
          <div
            class="flex align-center space-between ladder_cell"
            v-for="(cell, idx) of form.Settings"
            :key="idx"
          >
            <i
              class="el-icon-circle-close m-r-1"
              @click="deleteladderArray(idx)"
            ></i>
            <div class="m-r-2">
              <div class="flex align-center">
                <el-input
                  class="ladder_SName"
                  v-model="cell.Sname"
                  placeholder="阶段名"
                ></el-input>
              </div>

              <div class="flex align-center">
                <el-input
                  type="number"
                  v-model="cell.StartTime"
                  min="0"
                  @keyup.native="proving2($event)"
                  class="flex-1"
                  placeholder="开始时间"
                >
                  <template slot="append">天</template>
                </el-input>
                <span class="m-l-1 m-r-1">至</span>
                <el-input
                  type="number"
                  v-model="cell.EndTime"
                  min="0"
                  @keyup.native="proving2($event)"
                  class="flex-1"
                  placeholder="结束时间"
                >
                  <template slot="append">天</template>
                </el-input>
              </div>
            </div>

            <div class="info_group">
              <div class="flex align-center">
                <span class="tit_span nowarp">达标金额：</span>
                <el-input
                  type="number"
                  v-model="cell.Target"
                  min="0"
                  @keyup.native="proving2($event)"
                  class="flex-1"
                >
                  <template slot="append">元</template>
                </el-input>
              </div>
              <div class="flex align-center">
                <span class="tit_span nowarp">奖励金额：</span>
                <el-input
                  type="number"
                  v-model="cell.Award"
                  min="0"
                  @keyup.native="proving2($event)"
                  class="flex-1"
                >
                  <template slot="append">元</template>
                </el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateShow(false)"> 取消 </el-button>
      <el-button type="primary" @click="save"> 保存 </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { deepClone } from '@/utils'
import { saveStandard, getStandardDetail } from '@/api/EquityManage/promoteBonus'
import { mapState } from 'vuex'

export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default () {
        return false
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      form: {},
      formTmpl: {
        "Id": "00000000-0000-0000-0000-000000000000",
        "UserId": "00000000-0000-0000-0000-000000000000",
        "OrgId": "00000000-0000-0000-0000-000000000000",
        "Remark": '',
        "IsSystem": 1,
        "Settings": [
          {
            "Id": "00000000-0000-0000-0000-000000000000", //新增：00000000-0000-0000-0000-000000000000，则为修改
            "Sname": "", //方案名称
            "SerialNum": 1,
            "Target": 0, //达标金额
            "Award": 0, //奖励金额
            // 'timeValue': ''
            'StartTime': "",
            'EndTime': ""
          },
        ]
      },
      rules: {
        Sname: [
          { required: true, message: '名称必填', trigger: 'blur' },
          { min: 1, max: 50, message: '名称长度在 1 到 50 个字符', trigger: 'blur' }
        ],


      }
    }
  },
  computed: {
    formName () {
      if (this.form.Id) {
        return '编辑'
      }
      return '新增'
    },
    ...mapState({
      userId: state => state.user.id,
    }),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler (val) {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate()
        }
        this.form = deepClone({ ...this.formTmpl, ...val })
        if (this.form.Id && this.form.Id != '00000000-0000-0000-0000-000000000000') {
          this.getDetail()
        }
      }
    }
  },
  methods: {
    updateShow (val) {
      this.$emit('update:show', val)
    },
    afterSave () {
      this.$notify({
        title: '操作成功',
        message: 'success',
        type: 'success',
        duration: 2000
      })
      this.updateShow(false)
      this.$emit('finish')
    },
    save () {
      this.$refs['dataForm'].validate((valid) => {
        const formData = deepClone(this.form)
        if (valid) {
          for (let item of formData.Settings) {
            if ((!item.StartTime && (this.$getType(item['StartTime']) !== 'Number')) || (!item.EndTime && (this.$getType(item['EndTime']) !== 'Number'))) {
              this.$notify({
                title: '提示',
                message: '阶段请填写时间',
                type: 'warning',
                duration: 2000
              })
              return
            }
            // item.StartTime = item.timeValue[0]
            // item.EndTime = item.timeValue[1]
            // delete item.timeValue
          }

          saveStandard(formData).then(() => {
            this.afterSave()
          })

        }
      })
    },
    async getDetail () {
      const { data } = await getStandardDetail({
        Id: this.form.Id
      })
      this.form = deepClone({ ...this.formTmpl, ...data })
      // for (let item of this.form.Settings) {
      //   item.timeValue = []
      //   item.timeValue[0] = item.StartTime
      //   item.timeValue[1] = item.EndTime
      // }

    },
    addladderArray () {
      let num = this.form.Settings.length
      this.form.Settings.push({
        "Id": "00000000-0000-0000-0000-000000000000", //新增：00000000-0000-0000-0000-000000000000，则为修改
        "Sname": "", //方案名称
        "SerialNum": num + 1,
        "Target": 0, //达标金额
        "Award": 0, //奖励金额
        "StartTime": "", //开始时间
        "EndTime": "" //结束时间
      })
    },
    deleteladderArray (index) {
      this.form.Settings.splice(index, 1)
    }
  }
}
</script>
<style  scoped>
.info_group {
  width: 65%;
}
.promoteB >>> .el-dialog {
  min-width: 560px;
}

.ladder_item {
  width: 95%;
  border-bottom: 1px solid #cecece;
  padding: 5px 0;
}
.ladder_cell + .ladder_cell {
  border-top: 2px dashed #f6bcbc;
}
.ladder_cell {
  padding: 5px 0;
}
.ladder_name {
  /* width: 100px !important; */
  margin-right: 3%;
}

.el-icon-circle-close {
  font-size: 18px;
  transition: color 0.25s linear;
}
.el-icon-circle-close:hover {
  color: #cecece;
  cursor: pointer;
}
.table_ladname {
  width: 30%;
  font-size: 16px;
}
</style>
